<template>
  <div class="v-container">
    <div class="img-list-hd">

      <div class="big-img-new">
        <router-link :to="{name:'视频详情',query:{video:JSON.stringify(video1[0])}}">
<!--    <img src="//www.jirou.com/uploads/180824/148-1PR4100030U8.jpg">-->

        <videoshow :src=video1[0].videoaddr videoWidth=815px videoHegiht=530px ></videoshow>
    <h4>{{video1[0].videotitle}}</h4>
        </router-link>
      </div>

       <ul class="suggest_news article-suggest">
           <li v-for="(item,index) in video2 ">
             <router-link :to="{name:'视频详情',query:{video:JSON.stringify(item)}}">
<!--               <img src="//www.jirou.com/uploads/180808/148-1PPQ00442227.jpg" class="suggest_news_img">-->
<videoshow :src=item.videoaddr   videoWidth=182px  videoHeight=117px  class="suggest_news_img" ></videoshow>
               <p style="margin-bottom: 50px; margin-top: 10px; font-size: 17px;">{{item.videotitle}}</p>
               <i class=" el-icon-video-play"></i> <span>{{item.createtime}}</span>
             </router-link>
           </li>
       </ul>
    </div>
    <div class="img-list-wrap">
<ul class="information-pic-list">
  <li class="video-icon" v-for="(item,index) in video3">
    <router-link :to="{name:'视频详情',query:{video:JSON.stringify(item)}}">
<!--      <img src="//www.jirou.com/uploads/180613/148-1P613095UN23.jpg">-->
      <videoshow :src=item.videoaddr   videoWidth=100%    class="suggest_news_img" ></videoshow>
      <h4>{{item.videotitle}}</h4>
    </router-link>
  </li>
</ul>
    </div>
  </div>
</template>

<script>
    import VideoShow from "./VideoShow";

    export default {
        name: "VideoContent",
      components:{
          videoshow:VideoShow
      },


      data(){
          return{
            video1:[],
            video2:[],
            video3:[]
          }
      },
      created() {
        var url = '/video';
        this.$axios.get(url)
          .then( (res)=> {
            //document.write("data is coming", res.data.code);
            if (res.data.code === 200) {
              for(var i=0;i<res.data.data.length;i++) {
                let row = {}; // 定义一个当前添加数据的行
                row.id=res.data.data[i].id;
                row.userid=res.data.data[i].userid;
                row.videotitle=res.data.data[i].videotitle;
                row.videoaddr=res.data.data[i].videoaddr;
                row.audit=res.data.data[i].audit;
                row.brief=res.data.data[i].brief;
                row.createtime=res.data.data[i].createtime;
               if(i==0) this.video1.push(row);
               else if(i>=1&&i<=4) this.video2.push(row);
               else this.video3.push(row);
              }
              sessionStorage.setItem('video1',JSON.stringify(this.video1));
              sessionStorage.setItem('video2',JSON.stringify(this.video2));
              sessionStorage.setItem('video3',JSON.stringify(this.video3));
            }
            else {
              this.$message({message: res.data.msg, type: 'error'})
            }
          }).catch(function (error) {
          console.log(error);
        } );
      }
    }
</script>

<style scoped>

  body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, div, pre, fieldset, button, input, textarea, th, td, span, a {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: normal;
  }
  ol, ul, li {
    list-style: none;
  }
.v-container{
  width: 1240px;
  margin: 0 auto;
  overflow: hidden;
}

  .img-list-hd {
    margin: 30px 0 0 0;
    overflow: hidden;
  }
  img {
    width: 100%;
    border: none;
    vertical-align: top;
  }
  .blue-border{
    border: #409EFF solid;
  }
  .img-list-hd .big-img-new {
    position: relative;
    width: 815px;
    height: 530px;
    float: left;
  }
  .img-list-hd .big-img-new img {
    object-fit: cover;
    width: 815px;
    height: 530px;
    z-index: 0;
  }
  .img-list-hd .big-img-new h4 {
    position: absolute;
    line-height: 75px;
    font-size: 26px;
    color: #fff;
    bottom: 0;
    text-align: center;
    letter-spacing: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 10px;
    width: 100%;
    background: rgba(13,5,11,0.87);
  }
  h4 {
    display: block;

    font-weight: bold;
  }

  .img-list-hd .article-suggest {
    width: 406px;
    float: right;

  }
.article-suggest {
  margin:0px; padding: 0px;
}
.suggest_news {
  overflow: hidden;
}
  .suggest_news_img{
    object-fit: cover;
    float: left;
    margin-right: 10px;
  }
  .img-list-hd .suggest_news li:first-of-type {
    padding-top: 0;
  }
  .img-list-hd .article-suggest.suggest_news li {
    margin-bottom: 20px;
    padding: 0;
    border: none;
    background: #fafafa;
    position: relative;
  }
  .suggest_news li {
    padding: 20px 0;
    border-bottom: 1px solid #e7e7e7;
    overflow: hidden;
    position: relative;
  }
  ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
  }
  .img-list-wrap {
    width: 1185px;
    float: left;
    padding-bottom: 70px;
    margin: 0px;
  }
  .information-pic-list {
    overflow: hidden;
    margin: 0px;
    padding: 0px;
  }
  .information-pic-list li {
    width: 260px;
    margin-right: 30px;
    float: left;
    padding: 0px;
  }
  .router-link-active {
    text-decoration: none;
    color: #333333;
  }
  a {
    text-decoration: none;
    color: #333333;
  }
</style>
